<template>
  <div>
    <el-card class="box-card">
      <div class="card">
        <div class="left">
          <el-input
            class="input"
            placeholder="请输入班级名称"
            :prefix-icon="Search"
            v-model="keys"
            clearable
            @change="SearchClass"
          ></el-input>
          <el-button type="primary" :icon="Search" @click="SearchClass" v-hasBtn="'classSelect'"
            >查询</el-button
          >
        </div>
        <div class="right">
          <el-button type="primary" :icon="Plus" @click="addClass" v-hasBtn="'addClass'"
            >添加班级</el-button
          >
        </div>
      </div>
    </el-card>
    <el-card>
      <div>
        <el-table border :data="classList" v-loading="isLoading">
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            label="班级名称"
            prop="className"
            align="center"
          ></el-table-column>
          <el-table-column
            label="班级人数"
            prop="classNumber"
            align="center"
          ></el-table-column>
          <el-table-column
            label="作业数量"
            prop="count"
            align="center"
          ></el-table-column>
          <el-table-column label="带班老师" align="center">
            <template #default="{ row }">
              <el-tag v-if="row.teaID?.teaId">
                {{ row.teaID?.teaId?.teaName }}</el-tag
              >
              <el-tag v-else type="danger">暂无带班讲师</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center">
            <template #default="{ row }">
              {{ formatDate(row.CreateAt) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button type="warning" :icon="InfoFilled" size="small" @click="infoClass(row._id)" v-hasBtn="'classDetail'"
                >班级详情</el-button
              >
              <el-button type="danger" :icon="Delete" size="small" @click="deleteClass(row._id)" v-hasBtn="'deleteClass'"
                >删除班级</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          class="page"
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="jumper, prev, pager, next, ,total,sizes"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <AddClass v-model="isShow" @getClassList="getClassList"></AddClass>
    <el-dialog v-model="centerVis" title="班级详情" width="800" center>
      <el-table :data="stulist" border  >
        <el-table-column label="学号" prop="stuNum" align="center"  ></el-table-column>
        <el-table-column label="学生姓名" prop="stuName" align="center"  ></el-table-column>
        <el-table-column label="作业提交次数"  align="center" prop="submitNum" ></el-table-column>
        <el-table-column label="是否在读"  align="center" >
          <template #default="{row}" >
            <el-tag v-if="row.isReading==1" type="success">在读</el-tag>
            <el-tag v-else type="danger">离校</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="账号密码"  align="center" prop="password" ></el-table-column>
        <el-table-column label="职位"  align="center" >
          <template #default="{row}" >
            <el-tag>{{ row.jobId?.jobName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="班级"  align="center" prop="className" ></el-table-column>
      </el-table>
    
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { Plus, Search, InfoFilled, Delete } from "@element-plus/icons-vue";
import { getClassListAPI , getClassInfoAPI, deleteClassAPI } from "@/api/class";
import { formatDate } from "@/utiles/time";
import AddClass from "./AddClass/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
let isLoading = ref(true);
let pageNo = ref(1);
let pageSize = ref(10);
let total = ref(0);
let keys = ref("");
let classList = ref([]);
let isShow = ref(false);
let centerVis = ref(false);
let stulist = ref([])
onMounted(() => {
  getClassList();
});
//获取班级列表
const getClassList = async () => {
  isLoading.value = true;
  let result = await getClassListAPI(pageNo.value, pageSize.value, keys.value);

  classList.value = result.data?.list;
  total.value = result.data?.total;
  isLoading.value = false;
};
const handleSizeChange = () => {
  getClassList();
};
const handleCurrentChange = () => {
  getClassList();
};
const SearchClass = () => {
  getClassList();
};
//添加班级
const addClass =  () => {
  isShow.value = true;
 
};
const infoClass = async (id)=>{
  centerVis.value = true;
  let result = await getClassInfoAPI(id)

  stulist.value = result.data
}
const deleteClass = (id)=>{
  ElMessageBox.confirm("你确定删除这个班级吗?","警告",{
    confirmButtonText:"确定",
    cancelButtonText:"取消",
    type:"warning"
  }).then(async()=>{
    let result = await deleteClassAPI(id)
    if(result.code==200) {
      ElMessage.success('删除成功')
    }
    getClassList()
  }).catch(()=>{
    ElMessage({
      type:"info",
      message:"已取消删除"
    })
  })
}
</script>
<style lang="scss" scoped>
.box-card {
  margin-bottom: 10px;
  .card {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      .input {
        margin-right: 10px;
      }
    }
  }
}
.page {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>
